<template>
	<view class="container">
		<!--  #ifdef  APP-PLUS-->
		<uni-nav-bar fixed='true' @clickLeft='back' statusBar='true' style="width: 100%;">

			<view slot='left'>
				<text class="cuIcon-back"></text>

			</view>
			<view class="status-center padding-left center bg-F4F4F4  round" style="height: 70rpx;margin-left: -30px;">
				<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx;height: 25rpx;">
				</image>
				<input type="text" @input='handSearch' value="" class="text-13 f-grow1 padding-left-sm"
					placeholder="搜索姓名、手机号" />
			</view>

		</uni-nav-bar>
		<!--  #endif -->
		<view class="bg-white">
			<!--  #ifdef     MP-WEIXIN -->
			<kg-custom :isBack="true" bgColor="bg-white">
				<block slot="left">
					<view class="flex justify-start align-center bg-F4F4F4 padding-left round margin-left-sm"
						style="height: 70rpx;width: 460rpx;">
						<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx;height: 25rpx;">
						</image>
						<input type="text" @input='handSearch' value="" class="text-13 f-grow1 padding-left-sm"
							placeholder="搜索姓名、手机号" />
					</view>
				</block>
			</kg-custom>
			<!--  #endif -->
			<view class="padding-sm">
				<view class="round flex justify-between align-center bg-color tabs text-df text-white">
					<view :class="{on:mechanicAuditStatus==1}" class="tab round text-center" @click="checkType(1)">

						<block v-if='merNum'>
							网点技工({{merNum}})
						</block>
						<block v-else>网点技工</block>
					</view>
					<view :class="{on:mechanicAuditStatus==0}" class="tab round text-center" @click="checkType(0)">

						<block v-if='merNumEd'>
							技工申请({{merNumEd}})
						</block>
						<block v-else>技工申请</block>
					</view>
					<view :class="{on:mechanicAuditStatus==2}" class="tab round text-center" @click="checkType(2)">
						<block v-if='merCount'>
							已邀请({{merCount}})
						</block>
						<block v-else>
							已邀请
						</block>

					</view>
				</view>
			</view>
		</view>
		<view class="padding margin-sm bg-white flex justify-start radius10" v-for="(item,index) in list" :key='index'>
			<image :src="item.icon" mode="" class="round cu-avatar"></image>
			<!-- @click.stop="toPage('/filePage/pages/detail-or-order/detail-or-order')" -->
			<view class="margin-left-sm f-grow1">
				<view class="flex justify-between align-center">
					<view class="text-bold text-181818 text-xl">
						{{item.userName}}
					</view>
					<view class="text-sm color" v-if='item.level==1'>
						初级技工
					</view>
					<view class="text-sm color" v-if='item.level==2'>
						中级技工
					</view>
					<view class="text-sm color" v-if='item.level==3'>
						高级技工
					</view>
				</view>
				<view class="flex  justify-between align-center text-sm text-666 margin-top-sm">
					<view class="flex align-center text-sm text-666">
						<view>
							接单量<text class="text-15 margin-left-xs">{{item.orderServiceCount}}</text>
						</view>
						<view class="margin-left">
							收入<text class="text-15 text-FF3636 margin-left-xs"> ¥{{item.orderTotalAmount}}</text>
						</view>
					</view>
					<view v-if='mechanicAuditStatus==0'>
						<block v-if='item.applyAuditStatus==1'>审核通过</block>
						<block v-else-if='item.applyAuditStatus==2'>审核不通过</block>
						<block v-else>未审核</block>
					</view>
					<view v-if='mechanicAuditStatus==2'>
						<block v-if='item.applyAuditStatus==1'>邀请通过</block>
						<block v-else-if='item.applyAuditStatus==2'>邀请不通过</block>
						<block v-else>邀请中</block>
					</view>
				</view>
				<view class="flex justify-between align-center text-sm text-999" style="margin-top: 60rpx;">
					<view class="">
						加入时间 {{item.auditTime}}
					</view>
					<view class="margin-left">
						电话:{{item.userMobile}}
					</view>
				</view>
				<view class="margin-top flex justify-end align-center">
					<button
						@click="toPage('/filePage/pages/review/review?item='+encodeURIComponent(JSON.stringify(item))+'&type='+mechanicAuditStatus+'&issue='+issue+'&shopId='+shopId)"
						class="bg-color text-13 text-white btn round">
						详情

					</button>
					<button @click="cancel(item)" style="margin-left: 20px;" v-if='mechanicAuditStatus == 1'
						class="bg-color text-13 text-white btn round">
						取消
					</button>
				</view>
			</view>
		</view>
		<button @click="toPage('/filePage/pages/invitation-mechanic/invitation-mechanic?type=1')"
			class="padding bg-linear-FF416C text-white round footer flex justify-center align-center">
			<image :src="baseUrl + '/static/attention2.png'" mode="" class="margin-right-xs"></image>
			邀请技工
		</button>
		<uni-load-more :status="loading" />
	</view>
</template>

<script>
	import BetterPull from '@/common/util/BetterPull'
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = 'loading';
					let obj = {}
					let api = ''
					if (this.mechanicAuditStatus == 1) {
						obj = {
							pageNum: page,
							pageSize: 10,
							mechanicAuditStatus: this.mechanicAuditStatus,
							shopId: uni.getStorageSync("shopIdApply")
						}
						api = 'mechanic'
					} else if (this.mechanicAuditStatus == 0) {
						obj = {
							pageNum: page,
							pageSize: 10,
							shopId: uni.getStorageSync("shopIdApply"),
							// userId: Number(uni.getStorageSync('userId')),
							// workerType: 1
						}
						api = 'workList'
					} else {
						obj = {
							pageNum: page,
							pageSize: 10,
							shopId: uni.getStorageSync("shopIdApply"),
							// userId: Number(uni.getStorageSync('userId')),
							// workerType: 1
						}
						api = 'workerShopList'
					}


					if (this.userMobile) {
						obj.userMobile = this.userMobile
					}
					if (this.userName) {
						obj.userName = this.userName
					}
					const [err, res] = await this.$get(this.$api[api],
						obj)
					if (res) {
						var data = res.data.list
						// if (this.mechanicAuditStatus == 1) {
						// 	this.merNum = res.data.total

						// } else if (this.mechanicAuditStatus == 0) {
						// 	this.merNumEd = res.data.total
						// } else {
						// 	this.merCount = res.data.total
						// }
						done(data);
						if (data.length < 10) {
							this.loading = 'noMore';
						} else {
							this.loading = 'more';
						}

					}
					if (err) {
						done([]);
						this.loading = 'noMore';
					}
				}
			})
		],
		onLoad(options) {
			if (options.issue) {
				this.issue = options.issue
			}
			if (options.shopId) {
				this.shopId = options.shopId
			}
		},
		onShow() {
			this.getNumber()
		},

		data() {
			return {
				baseUrl: this.$config.baseUrl,
				loading: 'more',
				userName: '',
				userMobile: '',
				mechanicAuditStatus: 1,
				merNum: 0,
				merNumEd: 0,
				merCount: 0,
				reFreshStatus: "",
				shopId: '',
				issue: '',
				shopId: ''
			};
		},
		// watch: {
		// 	//监听reFreshStatus,如果有修改就执行监听器
		// 	reFreshStatus() {
		// 		this.mechanicAuditStatus = 1
		// 		this.merNum = 0
		// 		this.Refresh();
		// 		console.log("页面已重新加载");
		// 	}
		// },

		methods: {
			back() {
				console.log(1111)
				uni.navigateBack({

				})
			},
			toPage(url) {
				console.log(url)
				this.$util.openNewPage(url)
			},
			async getNumber() {
				const data = {
					id: uni.getStorageSync("shopIdApply")
				}
				const [err, rs] = await this.$get(this.$api.shopWorkerCount, data)
				if (rs) {
					console.log(rs)
					this.merNum = rs.data.mechanicCount
					this.merNumEd = rs.data.mechanicApplyCount
					this.merCount = rs.data.mechanicApplyShopCount
				}
			},
			checkType(status) {
				this.mechanicAuditStatus = status
				this.list = []
				this.Refresh();
			},
			handSearch(e) {
				this.userMobile = ''
				this.userName = ''
				var n = Number(e.detail.value);
				if (!isNaN(n)) {
					this.userMobile = n

				} else {
					this.userName = e.detail.value
				}
				// console.log(this.userName)
				this.Refresh();
			},
			async cancel(item) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '你确定移除该技工吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							const data = {
								shopId: item.shopId,
								userId: item.userId
							}
							that.$get(that.$api.updateMechanicShopId, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									that.Refresh();
									that.getNumber()
								}

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

				

			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		padding: 4rpx;

		.tab {
			width: 350rpx;
			padding: 16rpx;
		}

		.on {
			background: #fff;
			color: #ED7200;
			font-weight: bold;
		}
	}

	.footer {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 98rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.btn {
		padding: 20rpx 50rpx;
	}

	.status-center {
		width: 460rpx;
		display: flex;
		align-items: center;
	}
</style>
